<!-- 商户入驻 -->
<template>
	<uni-forms ref="applyFormRef" v-model="state.model" :rules="rules" validateTrigger="bind" labelWidth="160"
		labelAlign="left" border :labelStyle="{ fontWeight: 'bold' }">
		<view class="bg-white form-box ss-p-x-30">
			<uni-forms-item name="name" label="真实姓名" class="form-item">
				<uni-easyinput v-model="state.model.name" placeholder="请填您的真实姓名" :inputBorder="false"
					placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal" />
			</uni-forms-item>

			<uni-forms-item name="mobile" label="手机号" class="form-item">
				<uni-easyinput v-model="state.model.mobile" type="number" placeholder="请输入手机号" :inputBorder="false"
					placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal">
				</uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="storeName" label="入住店铺" class="form-item" @click="showStoreList">
				<uni-easyinput type="select" style="pointer-events: none" v-model="state.model.storeName" placeholder="请选择入住的店铺" :inputBorder="false"
					placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal">
				</uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="remark" label="备注信息" :formItemStyle="{ alignItems: 'flex-start' }"
				:labelStyle="{ lineHeight: '5em' }" class="textarea-item">
				<uni-easyinput :inputBorder="false" type="textarea" v-model="state.model.remark"
					placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
					placeholder="请输入备注信息" clearable />
			</uni-forms-item>
		</view>
	</uni-forms>
	<su-fixed bottom :opacity="false" bg="" placeholder :noFixed="false" :index="10">
		<view class="footer-box ss-flex-col ss-row-between ss-p-20">
			<view class="ss-m-b-20">
				<button class="ss-reset-button save-btn ui-Shadow-Main" @tap="onSave">提交申请</button>
			</view>
		</view>
	</su-fixed>
	<su-popup :show="state.showPopup" showClose round="10" backgroundColor="#eee"  @close="state.showPopup = false">
	  <view class="select-popup">
	    <view class="title">
	      <span>{{ '选择店铺' }}</span>
	    </view>
	    <scroll-view
	      class="scroll-box"
	      scroll-y="true"
	      :scroll-with-animation="true"
	      :show-scrollbar="false"
	      @scrolltolower="loadmore"
	    >
	      <view
	        class="item"
	        v-for="item in state.pagination.data"
	        :key="item.id"
	        @tap="onSelect('select', item)"
	      >
	        <template>
	          <view class="bg-white order-list-card-box ss-r-10 ss-m-t-14 ss-m-20"
	                :key="item.id">
	            <view class="order-card-header ss-flex ss-col-center ss-row-between ss-p-x-20">
	              <view class="order-no">{{ item.name }}</view>
	            </view>
	          </view>
	        </template>
	        
	      </view>
	      <uni-load-more :status="state.loadStatus" :content-text="{ contentdown: '上拉加载更多' }" />
	    </scroll-view>
	  </view>
	</su-popup>
	
</template>

<script setup>
	import {
		ref,
		reactive,
		unref,
		onMounted
	} from 'vue';
	import sheep from '@/sheep';
	import _ from 'lodash-es';
	import {
		mobile
	} from '@/sheep/validate/form';
	import BrokerageApi from '@/sheep/api/trade/brokerage';
	import { BrokerageTypeEnum } from '@/sheep/util/const';
	import OrderApi from '@/sheep/api/trade/order';
	import SpuHistoryApi from '@/sheep/api/product/history';
	import LifeCircleApi from '@/sheep/api/product/lifecircle';

	const applyFormRef = ref(null);
	const state = reactive({
		showPopup: false,
		model: {
			name: '',
			mobile: '',
			remark: '',
			storeName: '',
			storeId: '',
		},
		rules: {},
		loadStatus: '',
		pagination: {
		  data: [],
		  current_page: 1,
		  total: 1,
		  last_page: 1,
		},
	});

	const rules = {
		name: {
			rules: [{
				required: true,
				errorMessage: '请输入您的真实姓名',
			}, ],
		},
		mobile,
		remark: {
			rules: [{
				required: false,
				errorMessage: '请输入备注信息',
			}, ],
		},
		storeName: {
			rules: [{
				required: true,
				errorMessage: '请选择入住的店铺',
			}, ],
		},
	};
	
	const emits = defineEmits(['select', 'close']);
	const props = defineProps({
	  mode: {
	    type: String,
	    default: 'goods',
	  },
	  show: {
	    type: Boolean,
	    default: false,
	  },
	}); 

	const onSelect = (type, data) => {
		state.model.storeName = data.name;
		state.model.storeId = data.id;
		state.showPopup = false;
	}
	
	const showStoreList = (e) => {
		state.showPopup = true;
	};

	// 获得地区数据
	const getLifeCircleSoreData = () => {
		LifeCircleApi.getStoreListAll().then((res) => {
			if (res.code === 0) {
				state.options = res.data
			}
		});
	};

	// 提交代理申请信息
	const onSave = async () => {
		// 参数校验
		const validate = await unref(applyFormRef)
			.validate()
			.catch((error) => {
				console.log('error: ', error);
			});
		if (!validate) {
			return;
		}

		// 提交请求
		const formData = {
			realName: state.model.name,
			phoneNumber: state.model.mobile,
			storeIds: [state.model.storeId],
			storeNames: [state.model.storeName],
			remark: state.model.remark,
			applyType: BrokerageTypeEnum.DZ.type,
		};
		const {
			code
		} =
		await BrokerageApi.onApply(formData)
		if (code === 0) {
			sheep.$router.back();
		}
	};

	onMounted(async () => {
		state.pagination.data = [];
		if (props.mode) {
		  getList(state.pagination.page);
		}
	});
	
	async function getList(page, list_rows = 5) {
	  state.loadStatus = 'loading';
	  const res =
	    props.mode == 'goods'
	      ? await LifeCircleApi.getStorePage({
	          page,
	          list_rows,
	        })
	      : await OrderApi.getOrderPage({
	          page,
	          list_rows,
	        });
	  let orderList = _.concat(state.pagination.data, res.data.list);
	  state.pagination = {
	    ...res.data,
	    data: orderList,
	  };
	  if (state.pagination.current_page < state.pagination.last_page) {
	    state.loadStatus = 'more';
	  } else {
	    state.loadStatus = 'noMore';
	  }
	}
	
	function loadmore() {
	  if (state.loadStatus !== 'noMore') {
	    getList(state.pagination.current_page + 1);
	  }
	}
</script>

<style lang="scss" scoped>
	:deep() {
		.uni-forms-item__label .label-text {
			font-size: 28rpx !important;
			color: #333333 !important;
			line-height: normal !important;
		}

		.uni-easyinput__content-input {
			font-size: 28rpx !important;
			color: #333333 !important;
			line-height: normal !important;
			padding-left: 0 !important;
		}

		.uni-easyinput__content-textarea {
			font-size: 28rpx !important;
			color: #333333 !important;
			line-height: normal !important;
			margin-top: 8rpx !important;
		}

		.uni-icons {
			font-size: 40rpx !important;
		}

		.is-textarea-icon {
			margin-top: 22rpx;
		}

		.is-disabled {
			color: #333333;
		}
	}

	.default-box {
		width: 100%;
		box-sizing: border-box;
		height: 100rpx;

		.default-box-title {
			font-size: 28rpx;
			color: #333333;
			line-height: normal;
		}
	}

	.footer-box {
		.save-btn {
			width: 710rpx;
			height: 80rpx;
			border-radius: 40rpx;
			background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
			color: $white;
		}

		.cancel-btn {
			width: 710rpx;
			height: 80rpx;
			border-radius: 40rpx;
			background: var(--ui-BG);
		}
	}
	.select-popup {
	  max-height: 600rpx;
	
	  .title {
	    height: 100rpx;
	    line-height: 100rpx;
	    padding: 0 26rpx;
	    background: #fff;
	    border-radius: 20rpx 20rpx 0 0;
	
	    span {
	      font-size: 32rpx;
	      position: relative;
	
	      &::after {
	        content: '';
	        display: block;
	        width: 100%;
	        height: 2px;
	        z-index: 1;
	        position: absolute;
	        left: 0;
	        bottom: -15px;
	        background: var(--ui-BG-Main);
	        pointer-events: none;
	      }
	    }
	  }
	
	  .scroll-box {
	    height: 500rpx;
	  }
	
	  .item {
	    background: #fff;
	    margin: 26rpx 26rpx 0;
	    border-radius: 20rpx;
	
	    :deep() {
	      .image {
	        width: 140rpx;
	        height: 140rpx;
	      }
	    }
	  }
	}
	.order-list-card-box {
	  .order-card-header {
	    height: 80rpx;
	
	    .order-no {
	      font-size: 26rpx;
	      font-weight: 500;
	    }
	
	    .order-state {}
	  }
	  .pay-box {
	    .discounts-title {
	      font-size: 24rpx;
	      line-height: normal;
	      color: #999999;
	    }
	
	    .discounts-money {
	      font-size: 24rpx;
	      line-height: normal;
	      color: #999;
	      font-family: OPPOSANS;
	    }
	
	    .pay-color {
	      color: #333;
	    }
	  }
	  .order-card-footer {
	    height: 100rpx;
	
	    .more-item-box {
	      padding: 20rpx;
	
	      .more-item {
	        height: 60rpx;
	
	        .title {
	          font-size: 26rpx;
	        }
	      }
	    }
	
	    .more-btn {
	      color: $dark-9;
	      font-size: 24rpx;
	    }
	
	    .content {
	      width: 154rpx;
	      color: #333333;
	      font-size: 26rpx;
	      font-weight: 500;
	    }
	  }
	}
	.warning-color {
	  color: #faad14;
	}
	
	.danger-color {
	  color: #ff3000;
	}
	
	.success-color {
	  color: #52c41a;
	}
	
	.info-color {
	  color: #999999;
	}
</style>